﻿@{
    ViewBag.Title = "Speedometer";
}

 <script type="text/javascript">
     $(document).ready(function () {
         chart = new Highcharts.Chart({
             chart: {
                    
                 
                         renderTo: 'graph',
                         type: 'gauge',
                         plotBackgroundColor: null,
                         plotBackgroundImage: null,
                         plotBorderWidth: 0,
                         plotShadow: false
                     },
	    
                     title: {
                         text: 'Speedometer'
                     },
	    
                     pane: {
                         startAngle: -150,
                         endAngle: 150,
                         background: [{
                             backgroundColor: {
                                 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                 stops: [
                                     [0, '#FFF'],
                                     [1, '#333']
                                 ]
                             },
                             borderWidth: 0,
                             outerRadius: '109%'
                         }, {
                             backgroundColor: {
                                 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                 stops: [
                                     [0, '#333'],
                                     [1, '#FFF']
                                 ]
                             },
                             borderWidth: 1,
                             outerRadius: '107%'
                         }, {
                             // default background
                         }, {
                             backgroundColor: '#DDD',
                             borderWidth: 0,
                             outerRadius: '105%',
                             innerRadius: '103%'
                         }]
                     },
	       
                     // the value axis
                     yAxis: {
                         min: 0,
                         max: 200,
	        
                         minorTickInterval: 'auto',
                         minorTickWidth: 1,
                         minorTickLength: 10,
                         minorTickPosition: 'inside',
                         minorTickColor: '#666',
	
                         tickPixelInterval: 30,
                         tickWidth: 2,
                         tickPosition: 'inside',
                         tickLength: 10,
                         tickColor: '#666',
                         labels: {
                             step: 2,
                             rotation: 'auto'
                         },
                         title: {
                             text: 'km/h'
                         },
                         plotBands: [{
                             from: 0,
                             to: 120,
                             color: '#55BF3B' // green
                         }, {
                             from: 120,
                             to: 160,
                             color: '#DDDF0D' // yellow
                         }, {
                             from: 160,
                             to: 200,
                             color: '#DF5353' // red
                         }]        
                     },
	
                     series: [{
                         name: 'Speed',
                         data: [80],
                         tooltip: {
                             valueSuffix: ' km/h'
                         }
                     }]
	
                 }, 
                 // Add some life
                 function (chart) {
                     if (!chart.renderer.forExport) {
                         setInterval(function () {
                             var point = chart.series[0].points[0],
                                 newVal,
                                 inc = Math.round( Math.random());
                             newVal = point.y + inc;
                             if (newVal < 0 || newVal > 200) {
                                 newVal = point.y - inc;
                             }
		        
                              //point.update(newVal);
                             point.update(@ViewBag.Entries[ViewBag.AllElem - 1]);
		        
                         }, 1000);
                     }
                 });
             });
 </script>


  <blockquote><center><big><i><p style="padding:25px;border:2px solid green;bottom:50px;right:10px;"">Это текст на странице со спидометром загрузки CPU.</i></p></big></center></blockquote>
<form>
  <button><mark>Нажмите,чтобы обновить страницу</mark></button>
    <style>
   mark {
    background: #ffec82;
    padding: 0 3px;
    border: 1px dashed #333;
   }
  </style>
</form>

 <p>Введите период графика:</p>
  <p><input list="id">
   <datalist id="id">
    <option value="День"></option>
    <option value="Месяц"></option>
    <option value="Год"></option>
   </datalist></p>


<div id="graph" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>